<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var timer = null;
    function displayClock(num) {//num是传入的startClock中的动态值
      if (num < 10) {
        return "0" + num;
      }
      else {
        return num;
      }
    }
    //停止计时
    function stopClock() {
      clearTimeout(timer);
    }
    //开始计时
    function startClock() {
      var time = new Date();
      var hours = displayClock(time.getHours()) + ":";
      var minutes = displayClock(time.getMinutes()) + ":";
      var seconds = displayClock(time.getSeconds());
      //显示时间
      show.innerHTML ="当前时间"+ hours + minutes + seconds;//在id为show的块区域显示
      timer = setTimeout("startClock()", 1000);//延时器
    }
  </script>
  <style>
    .text-warning {
      color: #f8ac59;
      font-size: 14px;
      padding: 10px 20px;
      margin: 0 0 20px;
      border-left: 5px solid #eee;
    }

    blockquote {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 40px;
      margin-inline-end: 40px;
    }

    .text-danger {
      color: #ed5565;
    }

    #show {

      font-size: 24px;
      color: #4213C9;
      text-align: center;
    }
  </style>
</head>

<body  onload="startClock()" onunload="stopClock()">

  <h3>欢迎进入首页</h3>
  <div id="show"></div>
  <blockquote class="text-warning" style="font-size:14px">您是否需要自己做一款后台、会员中心等等的，但是又缺乏html等前端知识…
    <br>您是否一直在苦苦寻找一款适合自己的后台主题…
    <br>您是否想做一款自己的web应用程序…
    <br>…………
    <h4 class="text-danger">欢迎加入我们</h4>
  </blockquote>

  

</body>

</html>